<template>
    <div class="home-container">
      <div class="common-layout">
        <el-container>
          <el-header>

          </el-header>
          <el-main>
            <div class="main-container">
              <el-divider />

            </div>
          </el-main>
          <el-footer>
            <div class="footer-container">

            </div>
          </el-footer>
        </el-container>
      </div>
    </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import myAxios from "../../../plugins/myAxios.js";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

const router = useRouter();
const userName = ref('');


onMounted(() => {
  getCurrentUser()
})

const getCurrentUser = () => {
  myAxios.get('/user/get/extendInfo').then(res => {
    userName.value =res.userName;
  }).catch(error => {
    ElMessage({
      type: 'error',
      message: '服务器内部错误',
    })
  });
}




</script>

<style scoped lang="less">
@import "../../../assets/css/common.less";
@import "//at.alicdn.com/t/c/font_4145508_zw64dsjcbs9.css";
.el-card {
  background-color: transparent; /* 设置背景色为透明 */
}
.home-container {
  //background: @EleColor;
  color: #000000;
  width: 100%;
  height: 100%;
  overflow: hidden;
  //background-image: url("../../assets/img/gaoda.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
  .header-container{
    width: 100%;
    height: 200px;
    margin: 0;
    //background: #8c939d;
    overflow: hidden;
    padding-top: 15px;
    .card-wrapper{
      margin-top: -50px;
      width: 100%;
      height: 200px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      .card-box{
        width: 230px;
        height: 120px;
        //display: inline-block;
        padding: 0;
        .card-img{
          background-color: red;
          width: 100px;
          height: 100px;
          padding-top: 10px;
          .no-gray{
            background: transparent;
          }
        }
        .card-img-qiandao{
          //padding-top: 5px;
        }
        .info-box{
          padding: 0;
          margin-left:20px;
        }
      }
      .card-box2{
        width: 230px;
        height: 120px;
        position: absolute;
        right: 100px;
        //display: inline-block;
        padding: 0;
        .card-img{
          padding-top: 10px;
          .no-gray{
            background: transparent;
          }
        }
        .card-img-qiandao{
          //padding-top: 5px;
        }
        .info-box{
          padding: 0;
          margin-left:20px;
        }
      }
      .card-box1{
        width: 230px;
        height: 120px;
        position: absolute;
        left: 100px;
        //display: inline-block;
        padding: 0;
        .card-img{
          padding-top: 10px;
          .no-gray{
            background: transparent;
          }
        }
        .card-img-qiandao{
          //padding-top: 5px;
          .no-gray{
            background: transparent;
          }
        }
        .info-box{
          padding: 0;
          margin-left:20px;
        }
      }
      .card-box3{
        width: 230px;
        height: 120px;
        position: absolute;
        left: 430px;
        //display: inline-block;
        padding: 0;
        .card-img{
          padding-top: 10px;
          .no-gray{
            background: transparent;
          }
        }
        .card-img-qiandao{
          //padding-top: 5px;
        }
        .info-box{
          padding: 0;
          margin-left:20px;
        }
      }
      .card-box4{
        width: 230px;
        height: 120px;
        position: absolute;
        right: 440px;
        //display: inline-block;
        padding: 0;
        .card-img{
          padding-top: 10px;
          .no-gray{
            background: transparent;
          }
        }
        .card-img-qiandao{
          //padding-top: 5px;
        }
        .info-box{
          padding: 0;
          margin-left:20px;
        }
      }
    }
  }
  .main-container{
    width: 100%;
    height:500px;
    //background: #eaeaea;
    margin-top: 138px;
    padding: 0;
    .chart-container{
      width: 100%;
      height:450px;
      margin-top: 20px;
      //background: #8c939d;
    }
  }
}
.el-card__body{
  padding: 0;
  display: flex;
}
</style>
